<template>
	<div class="a">
		<van-nav-bar title="账号管理"  left-arrow fixed />
		<van-cell-group class="space" style="width: 280;">
		  <van-cell title="我的头像"  is-link >
			  <template #value>
				  <van-image
				    round
				    width="40px"
				    height="40px"
				    src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
					@click="preview()"
				  />
			  </template>
		  </van-cell>
		  <van-cell title="真实姓名" value="内容" />
		  <van-cell title="身份证号" value="内容" />
		  <van-cell title="推荐人" value="内容" />
		</van-cell-group>
		
		<van-cell-group class="space">
		  <van-cell title="账号安全" is-link />
		  <van-cell title="隐私" is-link />
		  <van-cell title="个人信息手机清单" is-link />
		  <van-cell title="地址管理" is-link />
		  <van-cell title="更换银行卡" is-link />
		</van-cell-group>
		
		<van-cell-group class="space">
		  <van-cell title="注销" is-link />
		  <van-cell title="版本更新" value="1.0.9.1" />
		</van-cell-group>
		
		<van-button class="bottom-button">安全退出</van-button>
	</div>
	
	
</template>

<script setup>
	import { ImagePreview } from 'vant';
	import 'vant/es/image-preview/style';
	const VanImagePreview = ImagePreview.Component;
	function preview(){
		 ImagePreview({
		   images: [
		     'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
		   ],
		   closeable: true,
		 });
	}
	
	
</script>

<style>
	.a{
		
		text-align: left;
		background-color: whitesmoke;
		height: 1000px;	
	}
	
	.space{
	 margin-bottom:5px;
	}
	
	.bottom-button{
	 color: darkorange;
	 position: fixed;
	 bottom: 0px;
	 left: 0px;
	 width:100%;
	}
	
	
</style>